<template>
	<scroll-view class="scroll-list" scroll-y="true" style="height: 100%;width: 100%;" @scrolltolower="loadMore">
		<view class="card" v-for="(todo, index) of list" :key="todo.taskId" @click="toHandle(todo)">
			<view class="card-header flex flex-center">
				<view class="card-header-title">{{ todo.procDefName }}</view>
			</view>
			<view class="card-body">
				<view>
					发起人：<text>{{ todo.startUserName }}</text>、<text>{{ todo.startDeptName }}</text>
				</view>
				<view class="flex flex-center">
					<view class="flex-1">
						发起时间：{{ todo.createTime }}
					</view>
					<view>
					</view>
				</view>
				<view class="flex flex-center">
					<view class="flex-1">
						审批时间：{{ todo.finishTime }}
					</view>
					<view>
						<view class="btn-deatil">查看详情</view>
					</view>
				</view>
			</view>
		</view>
		<view class="m-t">
			<u-empty v-if="!list.length" src="/static/tduck/null.png" text="没有已处理" mode="list" />
			<view v-if="list.length < total" class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			query: {
				current: 1,
				size: 20,
			},
			loadStatus: 'loadmore',
			list: [],
			total: 0,
		};
	},
	created() {
		this.loadList()
		uni.$on('refreshData',(type) => {
			if(type===0){
				this.list=[]
				this.loadList()
			}
		})
	},
	methods: {
		toHandle(task) {
			console.log(task)
			uni.navigateTo({
				url: `/pages/workflow/finished/handle?taskId=${task.taskId}&instanceId=${task.procInsId}&deployId=${task.deployId}`
			});
		},
		loadMore() {
			if (this.list.length >= this.total || this.loadStatus === 'loading') {
				return;
			}
			this.loadStatus = "loading";
			this.query.current = this.query.current + 1;
			this.$nextTick(() => {
				this.loadList();
			})
		},
		loadList() {
			uni.showLoading({
				title: '加载中...'
			})
			this.$u.api.workflow.getFinishedList(this.query).then(res => {
				if (!res.records || res.records.length == 0 || this.list.length >= res.total) {
					this.loadStatus = "nomore";
					return;
				}
				this.list = this.list.concat(res.records);
				this.total = res.total;
				this.loadStatus = "loadmore";
				uni.hideLoading();
			});
		},
		search(value) {
			this.list = [];
			this.query.current = 0;
			this.loadList();
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $u-bg-color;
}
</style>
<style lang="scss" scoped>
page {
	height: 100%;
	background-color: $u-bg-color;
}

.card-header-tag{
	font-size: 25.36rpx;
	color: #fff;
	padding: 7.25rpx 18.12rpx;
	margin-left: 27.17rpx;
	background-color: #F4935F;
	border-radius: 7.25rpx;
}

.card-body{
	color: #AAAAAA;
	font-size: 25.36rpx;
}

.btn-deatil{
	width: 144.93rpx;
	height: 50.72rpx;
	line-height: 50.72rpx;
	font-size: 25.36rpx;
	border: 1px solid #1BA6FC;
	text-align: center;
	border-radius: 9.06rpx;
	color: #1BA6FC;
}
</style>
